bgImg = new Image();
bgImg.src = "images/bg.jpg";
//游戏控制
var Game = function() {
	self = this;
	//canvas 标签
	this.elem = null;
	//canvas 对象
	this.canvas = null;
	//画板的宽度
	this.width = 0;
	//画板的高度
	this.height = 0;
//	每个块的宽高
	this.w = 0;
	this.h = 0;
	//运行速度 
	this.step = 10;
	//游戏运行中 true运行中  false 游戏结束
	self.gamePlay =true;
	//块的元素
	this.blockList = [];
	//定时器id
//	this.timeId=0;
//	点击的数量
	this.num=0;
//	倒计时定时器
	this._t=0;
	this.djs=null;
//	重新开始
	this.restartX=0;
	this.run = function() {
		this.elem = document.getElementById('canvas');
		this.width =this.elem.width=window.innerWidth;
		this.height = this.elem.height=window.innerHeight;
		this.djs=document.getElementById('djs');
		this.w=this.width/4;
		this.h=this.height/4;
		this.canvas = this.elem.getContext('2d');
//		创建黑白块
		this.createBlock();
		//运行
		this.play();
	}

	this.createBlock=function(){
		//游戏开始时的元素  (array.push('name')向数组末尾添加一个元素)
		for(var y=0;y<4;y++){
			//	随机取黑白块
			var colors=['white','black','white','white'];
			for(var a, b, c = colors.length; c; a = parseInt(Math.random() * c), b = colors[--c], colors[c] = colors[a], colors[a] = b);
			if(y==3){
				this.blockList.push(new Block(this,0,0,y,this.w,this.h,colors));
			}else{
				this.blockList.push(new Block(this,1,0,y,this.w,this.h,colors));
			}
		}
	}
	this.play=function(){
//		画块
		self.drawBlock();
//		绑定点击事件
		self.elem.addEventListener('touchstart',self.start,false);
//		如果点击失败  或者时间到
		if(self.gamePlay==false){
			clearTimeout(self._t);
			clearTimeout(self.timeId);
			self.elem.removeEventListener('touchstart',self.start,false);
			self.gameOver();
			return;
		}
		
		self.timeId = setTimeout(self.play,self.step);
	}
	
	//画块
	this.drawBlock=function(){
		for(var i=0;i<4;i++){
			this.blockList[i].y=i;
			this.blockList[i].draw();
		}
	}
	this.start=function(e){
//		获得点击的x y坐标
		var touchX=Math.floor(e.changedTouches[0].pageX);
		var touchY=Math.floor(e.changedTouches[0].pageY);
//		抓取第几行的第几个
		var x=Math.floor(touchX/self.w);
		var y=Math.floor(touchY/self.h);
//		点击的时候改变点击块的状态
		if(touchY>=self.h*2 &&touchY<=self.height-self.h){
//			如果点击的为黑色就变成灰色
			if(self.blockList[y].color[x]=='black'){
//				数量+1
				self.num++;				
				self.blockList[y].img[x] = darkImg;
				self.blockList[y].drawOne(x,y);
				//改变画布位置
				self.changePos();	
			}else{
				self.blockList[y].img[x] = redImg;
				self.gamePlay =false;
			}
		}	
	}
	//改变画布位置
	this.changePos=function(){
		for (var i = this.blockList.length - 1; i > 0; i--) {
//			改变y的值
			this.blockList[i-1].y = this.blockList[i].y;
		}
//		删除最后一个元素		
		self.blockList.pop();
//		给新添加的一排元素 生成随机色
		var colors=['white','black','white','white'];
		for(var a, b, c = colors.length; c; a = parseInt(Math.random() * c), b = colors[--c], colors[c] = colors[a], colors[a] = b);
//		向开始添加一个元素
		self.blockList.unshift(new Block(this,1,0,0,self.w,self.h,colors));
//		重新执行画布
		self.drawBlock();
	}
//	倒计时
    this.clock=function(){
        t= self.djs.innerHTML;
//      时间为0  游戏结束 清除倒计时
         if(t<=0){
         	self.gamePlay=false;
            clearTimeout(self._t);
            return;
        }
        t=parseFloat(t-0.01);
       
        t=t.toFixed(2);
        self.djs.innerHTML=t;
        self._t=setTimeout(self.clock,10);
    }
    self._t=setTimeout(self.clock,10);
        
	//游戏结束
	this.gameOver=function(){
		setTimeout(function(){
//			倒计时隐藏  
			self.djs.style.display='none';
			self.canvas.drawImage(redImg,0,0);
			self.write('60','#fff','游戏结束',100);
			self.write('40','#fff','本次通关：'+self.num,(self.height+40)/2);
			self.restartX=self.write('40','#000','点击重来',(self.height-40));
//			给重新开始绑定点击事件
			self.elem.addEventListener('touchstart',self.restart,false);
		},1000);
	}
//	重新开始
	this.restart=function(e){
//		获得点击的x y坐标
		var touchX=Math.floor(e.changedTouches[0].pageX);
		var touchY=Math.floor(e.changedTouches[0].pageY);
//		如果点击到重新开始
		if(touchX<=(self.width+self.restartX)/2 &&touchX>=self.restartX  &&
			touchY>=(self.height-40*2) && touchY<=(self.height-40)   ) {
//			移除重新开始点击事件
			self.elem.removeEventListener('touchstart',self.restart,false);
//			重新开始游戏   游戏状态   清空数组   清空记录  重新创建黑白块   倒计时显示 重新设置15s
			setTimeout(self.clock,10);
			self.djs.style.display='block';
			self.djs.innerHTML='15.00';
			self.gamePlay =true;
			self.blockList=[];
			self.num=0;
			self.createBlock();
			self.play();
		}
	}
//	字体居中
	this.write=function(fontSize,color,content,height){
		//字体样式
//		context.font = "italic bold 24px serif"		
		self.canvas.font="bold "+fontSize+"px Arial";
		self.canvas.fillStyle=color;
		//获取文字宽度 
		var s = self.canvas.measureText(content);
		//写填充文字
		self.canvas.fillText(content,(self.width-s.width)/2,height);
		return (self.width-s.width)/2;
	}

}
window.onload = function() {
	obj = new Game();
	obj.run();
}
